<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<head>
  <meta charset="UTF-8">
  <title>管理员后台</title>
  <th:block th:include="common.html :: source"></th:block>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="/layui/css/layui.css"/>
  <link rel="stylesheet" href="/layui/css/layuiAdmin.css"/>
</head>
<style>
  .admin{background:#E6E6FA;position:fixed;border: 0;
    right:0;bottom:0;top:75px;left:187px; padding:2px;
    padding-bottom:0px;
    width: 90%;
    height: 530px;
    overflow:scroll; min-height:95%;
  }

  .rightmenu { position: absolute; width: 80px; z-index: 9999; display: none; background-color: #fff; padding: 2px; color: #333; border: 1px solid #eee; border-radius: 2px; cursor: pointer; }
  .rightmenu li { text-align: center; display: block; height: 25px; line-height: 25px; }
  .rightmenu li:hover { background-color: #666; color: #fff; }

  .layui-tab-title .layui-this{
    border: 0;
    border-top: 1px black solid;

  }
  .layui-side{
    width: 220px;
  }
  #iframeMain{
    width: 1250px;margin: 5px; overflow: scroll;
  }


</style>
<body class="layui-layout-body">

<div class="layui-layout ">
  <!--头-->
  <div class="layui-header" style="background: #393D49;height: 61px">
    <a href="javascript:;" class="layui-hide-xs">
      <div class="layui-logo" style="padding-left: 30px">
        <a href="/home" style="color: #fff;font-family: Gabriola; font-size: 35px;" >Mall system</a></div>
    </a>
    <ul class="layui-nav layui-layout-left" style="margin-left: 20px">

      <li class="layui-nav-item layui-hide-xs" lay-unselect>
        <a href="http://www.baidu.com/" target="_blank" title="前台">
          <i class="layui-icon layui-icon-website"></i>
        </a>
      </li>
      <li class="layui-nav-item" lay-unselect>
        <a href="javascript:;" layadmin-event="refresh" title="刷新">
          <i class="layui-icon layui-icon-refresh-3"></i>
        </a>
      </li>
    </ul>

    <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right" th:if="${session.loginInfo} != null">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
      <li class="layui-nav-item" lay-unselect>
        <a tab-url="/manage/toBulletinInfo" href="javascript:;" class="site-active" tab-layid="61"  tab-name="公告一览" lay-text="消息中心">
          <i class="layui-icon layui-icon-notice"></i>

          <!-- 如果有新消息，则显示小圆点 -->
          <span class="layui-badge-dot"></span>
        </a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img th:src="${session.loginInfo.headPortrait}" class="layui-nav-img layui-anim-rotate"/>
          <span style="color: #fff" th:text="${session.loginInfo.nickname}"></span>
        </a>
        <dl class="layui-nav-child">
          <dd class="layui-this"><a class="site-active" tab-name="修改信息" tab-url="/manage/toPersonInfo" tab-layid="41" href="javascript:;">基本资料</a></dd>
          <dd class="layui-this"><a class="site-active" tab-name="修改密码" tab-url="/manage/toPassWord" tab-layid="42" href="javascript:;">修改密码</a></dd>
          <dd><hr/></dd>
          <dd class="layui-this"><a href="/loginOut" >退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item layui-hide-xs" lay-unselect>
        <a href="javascript:;" lay-header-event="menuRight"><i class="layui-icon layui-icon-more-vertical"></i></a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-side-menu">
    <div class="layui-side-scroll" >
      <div class="layui-logo" >
        <a href="/home">
          <span style="color: #fff;font-family: Gabriola; font-size: 35px;padding-left: 30px">Mall system</span>
        </a>

      </div>
      <ul class="layui-nav layui-nav-tree" lay-filter="test" style="margin-top: 0">
        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;" >商家信息</a>
          <dl class="layui-nav-child">
            <dd><a class="site-active" tab-name="商户信息" tab-url="/manage/toCategory" tab-layid="11" href="javascript:;">商户信息</a></dd>
            <dd><a class="site-active" tab-name="商品信息" tab-url="/manage/toShoeInfo" tab-layid="12" href="javascript:;">商品信息</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">规格信息</a>
          <dl class="layui-nav-child">
            <dd><a class="site-active" tab-name="颜色" tab-url="/manage/toSpecsColor" tab-layid="21" href="javascript:;">颜色</a></dd>
            <dd><a class="site-active" tab-name="尺码" tab-url="/manage/toSpecsSize" tab-layid="22" href="javascript:;">尺码</a></dd>
            <dd><a class="site-active" tab-name="商品规格" tab-url="/manage/toSpecsInfo" tab-layid="23" href="javascript:;">商品规格</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="site-active" tab-name="订单信息" tab-url="/manage/toOrderMaster" tab-layid="31" href="javascript:;">订单信息</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">个人设置</a>
          <dl class="layui-nav-child">
            <dd><a class="site-active" tab-name="修改信息" tab-url="/manage/toPersonInfo" tab-layid="41" href="javascript:;">修改信息</a></dd>
            <dd><a class="site-active" tab-name="修改密码" tab-url="/manage/toPassWord" tab-layid="42" href="javascript:;">修改密码</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">管理商户</a>
          <dl class="layui-nav-child">
            <dd><a class="site-active" tab-name="发布公告" tab-url="/manage/toSaveBulletin" tab-layid="51" href="javascript:;">发布公告</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" >公告</a>
          <dl class="layui-nav-child">
            <dd><a class="site-active" tab-name="公告一览" tab-url="/manage/toBulletinInfo" tab-layid="61" href="javascript:;">公告一览</a></dd>
          </dl>
        </li>

      </ul>
    </div>
  </div>

</div>
<script src="/layui/layui.js" charset="UTF-8"></script>


<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">

  <ul class="rightmenu">
    <li data-type="closeThis">关闭当前</li>
    <li data-type="closeOther">关闭其他</li>
    <li data-type="closeall">关闭所有</li>

  </ul>
</div>

<div class="layui-body">
  <!-- 内容主体区域 -->
  <div style="padding: 0 15px;">
    <div class="layui-tab" lay-allowClose="true" lay-filter="tabList">
      <ul class="layui-tab-title" style="background: white;border: none;padding-left: 10px">
        <li class="layui-this" lay-id="10" lay-allowClose="false">首页</li>
      </ul>
      <div class="layui-tab-content" style="width: auto;height: auto;min-height: 90%;padding: 0">
        <div class="layui-tab-item layui-show">
          <iframe style="width: 1250px; height: 600px"  scrolling="yes" frameborder="no" src="/manage/admin"></iframe>
        </div>

      </div>
    </div>
  </div>

</div>


</div>
<script type="text/javascript">

  layui.use(['element', 'jquery','layer', 'util'], function () {
    var element = layui.element,
            $ = layui.jquery
            ,layer = layui.layer
            ,util = layui.util;

    //头部事件
    util.event('lay-header-event', {

      menuRight: function(){
        layer.open({
          type: 1
          ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
          ,area: ['260px', '100%']
          ,offset: 'rt' //右上角
          ,anim: 5
          ,shadeClose: true
        });
      }
    });

    var deleteIndex;//全局变量

    element.on('tab(tabList)', function(data){
      deleteIndex=$(this).attr("lay-id");
    });

    //触发事件
    var active = {
      tabAdd: function (name, url, layid) {
        element.tabAdd('tabList', {
          title: name //'选项卡的标题'
          , content: '<iframe id="iframeMain" frameborder="no" src="' + url + '"></iframe>'//'选项卡的内容' //支持传入html
          , id: layid//'选项卡标题的lay-id属性值'
        });
        CustomRightClick(layid);   //给tab绑定右击事件
        FrameWH();
      },
      tabChange: function (layid) {
        element.tabChange('tabList', layid);
      },
      tabDelete: function (layid) {
        element.tabDelete('tabList', layid);
      },
      tabDeleteAll: function(ids) {
        $.each(ids,
                function(i, item) {
                  element.tabDelete("tabList", item);
                });
      }
    }


    //当点击有siteactive属性的标签时，即左侧菜单栏中内容 ，触发点击事件
    $('.site-active').on("click", function () {
      var dataid = $(this);
      var name = dataid.attr("tab-name");
      var url = dataid.attr("tab-url");
      var tab_layid = dataid.attr("tab-layid");


      //1、 判断tab-layid=layid的tab页是否打开
      if ($(".layui-tab-title li[lay-id]").length <= 0) { //1.1 初始状态：1个Tab页也没有打开
        active.tabAdd(name, url, tab_layid); //打开tab页
        active.tabChange(tab_layid)//转到该tab页
      } else { //1.2   判断该Tab页是否已打开
        var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
        $.each($(".layui-tab-title li[lay-id]"),
                function() {

                  //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                  if ($(this).attr("lay-id") == tab_layid) {
                    isData = true;

                  }
                });
        if (isData == false) {
          //标志为false 新增一个tab项
          active.tabAdd(name, url, tab_layid); //1.2.1  该Tab页未打开，则打开该tab页
        }

        active.tabChange(tab_layid)//1.2.2 转到该tab页
      }


      FrameWH();  //计算ifram层的大小

    });

    function CustomRightClick(id) {
      //取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
      $('.layui-tab-title li').on('contextmenu', function() { return false; });
      $('.layui-tab-title,.layui-tab-title li').click(function () {
        $('.rightmenu').hide();
      });
      //桌面点击右击
      $('.layui-tab-title li').on('contextmenu', function (e) {
        var popupmenu = $(".rightmenu");
        popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

        //判断右侧菜单的位置
        l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
        t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
        popupmenu.css({ left: l, top: t }).show(); //进行绝对定位
        //alert("右键菜单")
        return false;
      });
    }

    $(".rightmenu li").click(function() {
      if ($(this).attr("data-type") == "closeOther") {//关闭其他
        $.each($(".layui-tab-title li[lay-id]"), function () {
          //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
          if ($(this).attr("lay-id")!=deleteIndex) {
            console.log("即将删除lay-id"+$(this).attr("lay-id"));
            active.tabDelete($(this).attr("lay-id"));
          }
        });
      } else if ($(this).attr("data-type") == "closeall") {//关闭所有
        var tabtitle = $(".layui-tab-title li");
        var ids = new Array();
        $.each(tabtitle, function (i) {
          ids[i] = $(this).attr("lay-id");
        });
        active.tabDeleteAll(ids);
      } else if ($(this).attr("data-type") == "closeThis") {
        $.each($(".layui-tab-title li[lay-id]"), function () {
          //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
          if ($(this).attr("lay-id")==deleteIndex) {
            console.log("即将删除lay-id"+$(this).attr("lay-id"));
            active.tabDelete($(this).attr("lay-id"));
          }
        });
      }

      $('.rightmenu').hide();
    });



    function FrameWH() { //计算ifram层的大小- 41 - 10 - 60 - 10 - 44 - 10
      var h = $(window).height() ;
      $("iframe").css("height", h + "px");
    }

    $(window).resize(function() {
      FrameWH();
    });

  });

  //查询标题在公告中显示
  $.post({
    url: "/manage/findTitles",
    success: function (resp) {
      var url="/manage/toBulletin";
      $.each(resp, function (index, item) {
        $(".gonggao").append('<dd id="'+item+'"><a class="site-active"  href="'+url+'?title=' + item + '" target="right"><div style="padding-left: 35px" >' + item + '</div></a></dd>')
      });
    }
  });


</script>

</body>
</html>